<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix flex">
        <span
          v-if="deviceSingle"
          slot="title"
          class="device-header"
        >
          <el-image
            class="device-image"
            :src="getDeviceImage(deviceSingle)"
            :fit="fit"
          />
          {{ deviceSingle.name + ' —— ' + deviceSingle.serialno }}</span>
        <span class="mlauto flex" style="align-items:center;font-size:14px;">
          状态更新时间：{{ deviceSingle.states && deviceSingle.states.datatime || '' }}
        </span>
      </div>
      <state :device="deviceSingle" />
    </el-card>
    <action :device="deviceSingle" />
  </div>
</template>

<script>
import State from '@/components/Device/State/index'
import Action from '@/components/Device/Action/index'
import { getDeviceImage } from '@/utils/device'
import { mapGetters } from 'vuex'
export default {
  components: {
    State,
    Action
  },
  data() {
    return {
      fit: 'fill'
    }
  },
  computed: {
    ...mapGetters(['deviceSingle'])
  },
  methods: {
    getDeviceImage(device) {
      if (device && device.serialno) {
        return getDeviceImage(device)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.device-image{
  width:32px;
  height:32px;
  margin-right:8px;
}.device-header{
  font-size:16px;
  display:flex;
  align-items:center;
}
</style>
